<template>
  <div>
    <div class="footer">
      <div class="container">
        <div class="clearfix">
          <ul>
            <li>
              <p>首页</p>
              <div></div>
            </li>
            <li>
              <p>畅玩乐园</p>
              <div>
                <p>乐园介绍</p>
                <p>精彩活动</p>
                <p>员工风采</p>
                <p>会员服务</p>
                <p>乐园动态</p>
                <p>商务合作</p>
              </div>
            </li>
            <li>
              <p>明星IP</p>
              <div>
                <p>明星IP</p>
                <p>IP介绍</p>
                <p>IP运营</p>
                <p>主题空间</p>
                <p>IP衍生</p>
                <p>商务合作</p>
              </div>
            </li>
            <li>
              <p>合作加盟</p>
              <div>
                <p>乐园加盟</p>
              </div>
            </li>
            <li>
              <p>友情链接</p>
              <div>
                <p>万达集团</p>
                <p>商管集团</p>
                <p>影视集团</p>
              </div>
            </li>
            <li>
              <p>关于我们</p>
              <div>
                <p>公司简介</p>
                <p>精彩视频</p>
                <p>团建风采</p>
                <p>新闻中心</p>
                <p>人才招聘</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="statement">
          <p>法律声明</p>
          <p>© 2020万达宝贝王集团有限公司版权所有 “京ICP备14025069号-1”</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.footer {
  // height: 500px;
  background: #e4a824 url("../assets/img/h41.png");
  background-position: top left;
  background-repeat: repeat-x;
  .container {
    box-sizing: border-box;
    margin: 0 auto;
    width: 1170px;
    padding-top: 20px;
    > .clearfix {
      padding-right: 300px;
      > ul {
        display: flex;
        justify-content: space-between;
        > li {
          padding-top: 24px;
          > p {
            font-size: 16px;
            cursor: pointer;
            color: white;
            height: 50px;
            position: relative;
            &:hover {
              font-weight: bold;
            }
            &::after {
              display: block;
              content: "";
              width: 70px;
              height: 1px;
              background: #ecc266;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
          > div {
            font-size: 14px;
            padding-top: 30px;
            > p {
              cursor: pointer;
              color: #f8ead4;
              height: 35px;
              &:hover {
                color: white;
              }
            }
          }
        }
      }
    }
    > .statement {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #ecc266;
      height: 72px;
      line-height: 72px;
      font-size: 14px;
      color: #fff;
      > p:first-child {
        cursor: pointer;
      }
    }
  }
}
</style>
